<template>
  <el-dialog width="100%"
 
    :title="'选择数据表'"
    :close-on-click-modal="false"
    :visible.sync="visible">

  <el-container>
    <el-aside style="width:40%">

    <el-table border
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableColumns"
        tooltip-effect="dark"
        style="width: 100%"
        >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>  
        <el-table-column
          align="left"
          prop="dataType"
          label="字段类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="columnName"
          label="原始名"
          width="180"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>

    </el-aside>
    <el-main>
        <!-- <div class="topBar">
          <span class="left">数据预览</span>
          <span class="right">预览</span>
        </div> -->
          <span class="left">数据预览</span>
          <el-button type="primary" @click="preview()" class="right">预览</el-button>
          <hr style="margin-top:20px">

    <!-- <el-table border
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableColumns"
        tooltip-effect="dark"
        style="width: 100%"
        >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>  
        <el-table-column
          align="left"
          prop="dataType"
          label="字段类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="columnName"
          label="原始名"
          width="180"
          show-overflow-tooltip>
        </el-table-column>
      </el-table> -->

       <el-table :data="selectedColumnsData" style="width: 100%">
        <!-- <el-table-column v-for="col in multipleSelection" :prop="col.columnName" :label="col.columnName">
        </el-table-column> -->

        <el-table-column v-for="(item, index) in multipleSelection" :key="index" :prop="item.columnName" :label="item.columnName" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
        </el-table-column>

      </el-table>


    </el-main>
  </el-container>


    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandler">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
     <!-- <div @click="onTestClick">gggggggggg</div> -->
  </el-dialog>
 
</template>

<script>
  export default {
    data () {
       const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`
          });
        }
        return data;
      };
      return {

        multipleSelection: [],
        visible: false,
        dataForm: {
          id: 0,
          tableName: '',
          bPId: '',
          columnName: ''
        },
        
        tableNames: [],
        selectedTables: [],
        dataId: '',
        transfers: [],
        tableColumns: [],
        selectedColumnsData: [],
        row: [],
        cols: [{
            prop: 'date',
            label: '日期'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'address',
            label: '地址'
          },
        ]
      }
    },
    methods: {
     closeHandler(){
      this.visible = false 
      this.selectedTables=[];
      this.multipleSelection=[];
      this.selectedColumnsData=[];
      this.row=[];
     },


     handleSelectionChange(val) {
        this.multipleSelection = val;
        this.selectedTables=[];
        this.multipleSelection.map(
          item=>{
            this.selectedTables.push(item["columnName"]);
          }
        )
      },
      preview(){
      
        this.$http({
          url: this.$http.adornUrl(`/report/datapackage/preview`),
          method: 'post',
          data: this.$http.adornData({
            'dataId': this.dataId,
            'tableColumns': this.selectedTables
           }
          )
        }).then(({data}) => {
            this.selectedColumnsData=data.selectedColumns;
              console.log("ssssss",this.selectedColumnsData);
        })
      },

      getColumns(dataId){
        this.$http({
          url: this.$http.adornUrl(`/report/datapackage/columns/${dataId}`),
          method: 'get',
          params: this.$http.adornParams(
          )
        }).then(({data}) => {
            this.tableColumns=data.columns;

            this.$http({
              url: this.$http.adornUrl(`/report/datapackage/info/${this.dataId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                //debugger; selectedTables    tableColumns
                let arr=data.dataPackage.columnName.split(",");
                arr.forEach((item,index)=>{
                  // this.selectedTables.push(this.tableColumns.find(item2=>{
                  //   if(item2["columnName"]==item){
                  //     console.log(1313);
                  //   }
                  //   item2["columnName"]==item;
                  // }))
                     for(let i=0;i<this.tableColumns.length;i++){
                       if(item==this.tableColumns[i].columnName){
                         this.row.push(this.tableColumns[i]);
                           //this.selectedTables.push(this.tableColumns[i]);
                       }
                      
                     }
                
                })

                this.row.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                });
               
              }
            })


        })
      

      },

      init (id) {
          this.dataId=id;
          this.visible = true;
          this.getColumns(id);

        // this.$nextTick(() => {
        //     this.$http({
        //       url: this.$http.adornUrl(`/report/datapackage/info/${id}`),
        //       method: 'get',
        //       params: this.$http.adornParams()
        //     }).then(({data}) => {
        //       if (data && data.code === 0) {
        //         debugger;
        //         //debugger; selectedTables    tableColumns
        //         console.log("ffffff",this.tableColumns)
        //         this.selectedTables=data.dataPackage.columnName.split(",");
               
        //       }
        //     })
        // })



      },
      // 表单提交
      dataFormSubmit () {
        this.$http({
          url: this.$http.adornUrl(`/report/datapackage/update`),
          method: 'post',
          data: this.$http.adornData({
            'dataPackageId': this.dataId,
            'columns': this.selectedTables
           }
          )
        }).then(({data}) => {
          this.closeHandler()
           // this.selectedColumnsData=data.selectedColumns;
            //  console.log("ssssss",this.selectedColumnsData);
        })
      }
    }
  }
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .right{
    float: right;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    /* border-right: 8px solid white;
    margin-right: 10px; */
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center;
    line-height: 160px; */
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
